<template>
  <div class="container">
    <!--查询条件-->
    <div class="search-box" ref="queryForm" @keyup.enter="getTableList">
      <el-form :inline="true" :model="search" class="demo-form-inline">
        <el-form-item label="项目名称">
          <el-input v-model="search.projectName" size="small" clearable placeholder="请输入项目名称"></el-input>
        </el-form-item>
        <el-form-item label="合同名称">
          <el-input v-model="search.contractTitle" size="small" clearable placeholder="请输入合同名称"></el-input>
        </el-form-item>
        <el-form-item label="审批状态">
          <el-select v-model="search.status" size="small" placeholder="请选择状态">
            <el-option label="审批中" value="active"></el-option>
            <el-option label="审批完成" value="completed"></el-option>
            <el-option label="作废" value="cancel"></el-option>
            <el-option label="退回" value="reject"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="getTableList">查询</el-button>
          <el-button type="default" size="small" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--查询条件-->

    <!--操作-->
    <div class="operate-box" style="margin: 15px 0;" ref="add">
      <!--<el-button type="primary" size="small" plain icon="el-icon-plus" @click="handleAdd" v-hasPermi="['settleManage:settleCompile:add']">新增</el-button>-->
      <!-- <el-button type="danger" size="small" plain icon="el-icon-minus" @click="handleDelete(1,'')" v-hasPermi="['settleManage:settleCompile:delete']">删除</el-button> -->
    </div>
    <!--操作-->

    <!--表格-->
    <el-table ref="elTable" :data="list" border size="mini" stripe :height="listHeight || fillHeight('listHeight',['queryForm','add','pagination'],['hamburger-container','tags-view-container'], 100)" @selection-change="handleSelectionChange">
      <!-- <el-table-column type="selection" width="50"></el-table-column> -->
      <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
      <el-table-column prop="projectName" label="项目名称" show-overflow-tooltip></el-table-column>
      <el-table-column prop="projectNumber" label="项目编码" show-overflow-tooltip></el-table-column>
      <el-table-column prop="pigfarmName" label="猪场名称" show-overflow-tooltip></el-table-column>
      <el-table-column prop="contractTitle" label="合同名称" show-overflow-tooltip></el-table-column>
      <el-table-column prop="supplierName" label="承建单位" show-overflow-tooltip></el-table-column>
      <el-table-column prop="contractMoney" label="合同金额" show-overflow-tooltip></el-table-column>
      <el-table-column prop="completeBpmCompleteTime" label="竣工验收完成时间" show-overflow-tooltip min-width="120" ></el-table-column>
      <el-table-column prop="bpmCompleteTime" label="结算完成时间" show-overflow-tooltip min-width="120" ></el-table-column>
      <el-table-column prop="balanceMoney" label="结算金额" show-overflow-tooltip></el-table-column>
      <el-table-column label="任务阶段" prop="taskStage" min-width="100" align="center"/>
      <el-table-column label="任务责任人" prop="dealName" min-width="100" align="center">
        <template slot-scope="scope">
          <span style="color: red;text-decoration: underline;cursor: pointer;" v-if="scope.row.taskStage!=='已结束'" @click="handlePageJump(scope.row)">{{scope.row.dealName}}</span>
          <span style="color: #42b983;" v-else>{{scope.row.dealName}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="审批状态" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.status | handleStatus}}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click.native.prevent="handleEdit(scope.row.id, 'edit')" type="text" size="small" v-hasPermi="['settleManage:settleCompile:edit']" v-if="scope.row.status!=='active' && scope.row.status!=='completed' && scope.row.taskStage !=='分配结算人员'">编辑</el-button>
          <el-button @click.native.prevent="handleEdit(scope.row.id, 'view')" type="text" size="small" v-if="scope.row.taskStage !=='分配结算人员'">查看</el-button>
          <el-button @click.native.prevent="checkApprove(scope.row)" type="text" size="small" v-if="(scope.row.status==='active' || scope.row.status==='completed') && scope.row.taskStage !=='分配结算人员'">审批详情</el-button>
          <!--<el-button @click.native.prevent="handleDelete(2,scope.row)" type="text" size="small" v-hasPermi="['settleManage:settleCompile:delete']">删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <!--表格-->

    <!--分页-->
    <div class="page-box" ref="pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNum"
        :page-sizes="[10,30,50]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!--分页-->

  </div>
</template>

<script>
  import { getTableListApi, deleteApi } from "@/api/settleManage/settleCompile";
  import { restObject } from '../../../utils/index'
  import BaseIndex from "@/views/base/BaseIndex";
  import {newWindowBpm} from "@/utils/openBpm";
  import Index from "./index";
  export default {
    name: "SettleCompile",
    extends: BaseIndex,
    data() {
      return {
        search: { projectName:'', contractTitle: '', status:'' },//查询条件
        listHeight:0,//表格高度
        list: [],//表格数据
        selectedList: [],//选中项
        page:{ pageNum:1, pageSize:10 },//分页
        total:100,//总记录数
      }
    },

    filters:{
      handleStatus(val){
        const actions = {
          'active': '审批中',
          'completed': '审批完成',
          'cancel': '作废',
          'reject': '退回',
          'default': '暂存',
        }
        return actions[val] || actions['default']
      }
    },

    created(){
      this.getTableList();
    },

    methods:{

      /**
       * 获取表格数据
       */
      getTableList(){
        const loading = this.$loading({lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});
        getTableListApi(this.search,this.page).then(res => {
          console.log('结算编制列表:',res);
          loading.close();
          if(res.code === 0){
            const { records, total } = res.data;
            this.list = records;
            this.total = total;
          }else{
           this.$message.warning(res.msg)
          }
        }).catch(error => {
          console.log('error:',error);
          loading.close();
        })
      },


      /**
       *重置
       */
      handleReset(){
        // debugger
        restObject(this.search);
        this.getTableList();
      },

      /**
       *新增
       */
      handleAdd(){
        this.$router.push({
          path:'/settleCompile/detail',
          query:{
            type:'add',
          }
        })
      },

      /**
       * 责任人点击事件
       */
      handlePageJump(data){
        debugger
        const { id, completeId, taskStage} = data;
        debugger
        if(taskStage==="分配结算人员"){
          this.$router.push({
            path:"/completeAcceptance/detail",
            query:{
              type:"view",
              id:completeId,
            }
          })
        }else{
          this.$router.push({
            path:"/settleCompile/detail",
            query:{
              type:"edit",
              id,
            }
          })
        }
      },

      /**
       *编辑&&查看
       * @param id
       * @param type
       */
      handleEdit(id,type){
        this.$router.push({
          path:'/settleCompile/detail',
          query:{
            type,id
          }
        })
      },

      /**
       * 审批查询
       */
      checkApprove(data){
        newWindowBpm(data.instId,true,{path:`/settleCompile/index`},true, Index);
      },

      /**
       * 删除
       */
      deleteItem(ids){
        const loading = this.$loading({lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});
        deleteApi(ids).then(res => {
          console.log('删除:',res);
          loading.close();
          if(res.code === 0){
            this.$message.success('删除成功');
            this.getTableList();
          }else{
            this.$message.warning(res.msg);
          }

        }).catch(error => {
          loading.close();
          console.log('error:',error);
        })
      },

      /**
       *删除点击事件
       */
      handleDelete(type,data){
        // debugger
        let ids = [];
        let canDelete = true;
        if(type===1){//批量删除
          if(!this.selectedList.length){
            this.$message.warning("请选中要删除的项!");
            canDelete = false;
          }else{
            for(let i=0;i<this.selectedList.length;i++){
              const { id, status } = this.selectedList[i];
              //审核中和审核通过的结算单不能删除
              if(status==="active" || status==="completed"){
                this.$message.warning("审核中或审核通过状态的结算单无法删除!");
                canDelete = false;
                break;
              }else{
                ids.push(id);
              }
            }
          }
        }else{//单删
          const { status, id } = data;
          //审核中和审核通过的结算单不能删除
          if(status==="active" || status==="completed"){
            this.$message.warning("审核中或审核通过状态的结算单无法删除!");
            canDelete = false;
          }else{
            ids = [id];
          }
        }
        if(canDelete){
          this.$confirm('确定要删除吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.deleteItem(ids);
          })
        }
      },

      /**
       *复选框事件
       * @param val
       */
      handleSelectionChange(val) {
        this.selectedList = val;
      },

      /**
       *pageSize切换事件
       * @param val
       */
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.page.pageSize = val;
        this.getTableList();
      },

      /**
       *分页切换
       * @param val
       */
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page.pageNum = val;
        this.getTableList();
      }
    }
  }
</script>

<style scoped lang="scss">
  .container{
    position: relative;
    padding: 20px;
    box-sizing: border-box;
    background-color: white;
    .page-box{
      width: 100%;
      height: 60px;
      // display: flex;
      // justify-content: center;
      align-items: center;
      text-align: right;
      margin: 20px 0 0;
    }
  }
</style>
